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1. Librería Arduino para Processing 

La librería Arduino para Processing permite controlar una placa Arduino desde Processing 
sin tener que escribir código de Arduino, simplemete con cargar un código pre - diseñado en la 
placa, se podrán controlar los pines de Arduino y obtener los resultados en processing. 

La librería está disponible para su descarga en processing2-arduino.zip y su instalación es 
tan simple como descomprimir el contenido del .zip en la carpeta libraries del directorio 
Arduino. 

NOTA: En GNU/Linux será necesario cambiar Arduino . jar por arduino . jar debido a 
que GNU/Linux distingue entre mayúsculas y minúsculas. Arduino .jar se encuentra dentro 
de la carpeta “library” de la librería Firmata. 

Información detallada sobre la librería Firmata puede encontrarse en Arduino and Proces- 
sing. 

1.1. Preparando Arduino: 

Para preparar la placa Arduino para comunicarse con Processing usando la librería firmata 
simplemente es necesario cargar el sketch StandartFirmata disponible en Arduino IDE en la 
rutaArchivo ->Ejemplos ->Ejemplos desde Librerías ->Firmata ->StandartFirmata. 
En esta misma ruta pueden encontrarse otros ejemplos de uso de firmata más específicos y 
elaborados, sin embargo StandartFirmata será suficiente para leer y escribir en todos los 
pines diginales y análogos de Arduino UNO. 

1.2. Sketch Líneas Trigonométricas 

En este sketch se hace una exploración genométrica de las funciones trigonométricas cons- 
truyendo los respectivos segmentos en el círculo goniométrico, para tal fin se deben tener pre- 
sente algunos puntos esenciales: 

1. Como ya debe conocerse, el sistema coordenado de processing no es igual al sistema 
coordenado convencional, es decir, en un canvas de processing el punto (0, 0) se encuen- 
tra ubicado en la esquina superior izquierda y las coordenadas verticales (ordenadas) 
aumenta hacia abajo y las coordenadas horizontales (abscisas) como es acostumbrado, 
hacia la derecha. 
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2. La unidad de medida standar en processing es el pixel por lo que una unidad corresponde 
a un pixel. 

3. Para estudiar y entender el código de este sketch debe conocerse lo fundamental sobre 
la definición de funciones y clases en processing. 

4. Construcción de los segmentos trigonométricos 

a) Segmento del Seno: Segmento vertical que va desde el punto (cos(^4),0) hasta el 
punto (cos(yl), sin(^4)). 

b) Segmento del Coseno: Segmento horizontal entre los puntos (0,0) y (cos(,4),0). 

c) Segmento de la Tangente: Segmento vertical con extremos en los puntos (1,0) y 

(1, tan(yl)). 

d) Segmento de la Cotangente: Segemento horizontal entre (0, 1) y (cot(yl), 1). 

e) Segmento de la Secante: Segmento transversal desde (0,0) hasta (l,tan(A)). 

f) Segemento de la Cosecante: Segmento transversal desde el origen hasta (cot(A), 1). 

Estos segmentos están definidos sobre el sistema coordenado convencional no sobre el 
sistema coordenado de processing. 

Para comprender el código del Listing 1 se leerá de manera modular. En primer lugar las 
partes referentes a la comunicación Processing Arduino. En las líneas 1 a 3 se llama a las 
librerías de comunicación serial y flrmata y se define el objeto arduino, luego en las líneas 38 a 
40 se define el puerto y la velocidad de comunicación y se configuran los pines digitales 2 al 7 
de arduino como pines de entrada, en estos se conecta el dip switch, a continuación en la línea 
46 (en el draw( )) se llama a la función communication( ) definida en las líneas 59 a 69, en 
ésta se leen los pines digitales del 2 al 8 y su estado se almacena en el vector buttonState [ ] 
y el valor del pin análogo A0 se almacena en la variable angle. 

Luego, en las líneas 6 a 25 se definen todas la variables y objetos con las que se que 
construyen los segmentos trigonométricos, en primer lugar en la línea 6 se define un vector 
boolean para el estado de los botones del dip switch, las líneas 8 y 9 corresponde a un par 
de vectores de Imágenes destinados a contener las Imágenes correspondientes a los botones 
en estado activado y desactivado respectivamente, el arreglo imFile[] entre las líneas 10 a 
15 contiene los nombres de los archivos de imágen de los botones previamente cargados en 
la carpeta data del sketch, el arreglo buttonName[] contiene los nombres de las funciones 
trigonométricas que se pondrán como textos nombre de los botones y el arreglo colorFun- 
ction define los colores correspondientes a cada segmento trigonométrico. La línea 24 define 
las coordenadas del centro del círculo goniométrico y la línea 25 crea un vector de objetos de 
la clase boton que se puede leer en el Listing 2. 

La definición de los botones se desarrolla con el bucle for de las líneas 32 a 36 (en el 
setupO), allí se cargan las Imágenes que representan los dos estados de cada botón y se 
define cada objeto del vector botones. 
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A continuación en el draw( ), en la línea 47 se llama a la función ejes( ) que define el 
sistema de coordenadas para la construcción, se ubican los botones y se llama finalmente 
a la función segments ( ) que dibuja cada segmento trigonométrico de acuerdo al sistema de 
coordenadas definido con la función ejes y respecto del sistema de coordenadas de processing. 

La última función presente en el Listing 1, la función monitor ing( ), si se llama desde el 
draw( ) escribirá en la consola de processing el estado de cada botón y el valor del ángulo. 

Cada vez que se active un swltch en el dip swltch se activará uno de los segmentos trigo- 
nométricos; el ángulo se controla con el potenciómetro. 

1 ¡mport processing . serial . 

2 import cc . arduino . * ; 

3 Arduino arduino ; 

4 

5 // Botones 

e boolean[] buttonState = { f a I s e , false , false , false , false , false}; 

7 f I o at angle = 0 ; 

8 Plmage buttonsOnf] = new Plmage[6]; 

9 Plmage buttonsOff[] = new Plmage[6]; 

10 String imFile [] = { 

11 "sinOn.png", "cosOn. png", "tanOn.png", 

12 "cotOn.png", "secOn.png", "cscOn.png", 

13 " slnOff . png" , "cosOff . png" , "tanOff .png" , 

14 " cotOff . png" , "secOff . png" , "cscOff.png" 

is }; 

16 String buttonNamef] = { 

17 "sin(A)", "cos(A)", "tan(A)", 

18 "cot(A)", "sec(A)", "csc(A)" 

19 }; 

20 color colorFunction [] = { 

21 #BA6259 , #55626E, #8F6CA0, 

22 #598DAF, #59AB82, #CB9B4D 

23 } ; 

24 i n t h , k ; 

25 boton botones [] = new boton[6]; 

26 

27 void setup () { 

28 size (500 , 600) ; 

29 text Al ig n (CENTER) ; 

30 textSize (18) ; 

31 

32 fo r ( i nt i = 0 ; i < 6 ; i + + ) { 

33 buttonsOn[¡] = loadlmage ( i m File [ i ] ) ; 

34 buttonsOff [ I ] = loadlmage( imFile [ i + 6]); 

35 botones[¡] = new boton(31 + i * 75, 524, buttonsOn [ i ] , buttonsOff [ i ]) ; 

36 } 

37 

38 arduino = new Arduino ( this , " /dev/ttyACMO" , 57600); 

39 fo r ( i n t i = 2 ; i < 8 ; i + + ) { 

40 arduino . pinMode ( i , Arduino . INPUT) ; 

41 } 
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42 } 

43 

44 void draw() { 

45 background (#C4E9ED) ; 

46 communication () ; 

47 ejes(— 2, 2, 0.25, -2,2, 0.25) ; 

48 noStroke () ; 

49 f i 1 1 (#0c657e) ; 

so quad(0, height — 100, width , height — 100, width , height , 0, 
si for (int i = 0; ¡ <6; i + + ) { 

52 botones [ ¡ ]. d¡buja(buttonState[ ¡ ]) ; 

53 ( color Fu nct ion [ i ]) ; 

54 text ( buttonName [ ¡ ] , 60 + ¡ * 75, 580); 

55 } 

56 segments ( buttonState ) ; 

57 } 

58 

59 void communication () { 

60 fo r ( i n t i = 2 ; i < 8 ; i + + ) { 

61 if ( arduino . digitalRead ( i ) == Arduino . HIGH) { 

62 buttonState [ i — 2] = true ; 

63 } 

64 e I s e { 

65 buttonState [ i — 2] = false ; 

66 } 

67 } 

68 angle = map( arduino . analogRead (0) , 0, 1023, 0, 2 * ); 

69 } 

70 

71 void e j e s ( int xMin , int xMax, float xStep , int yMin , int yMax, 

72 int numberXDivisions = ¡nt((xMax— xMin) / xStep); 

73 int numberYDivisions = int ((yMax — yMin) / yStep); 

74 h = width / 2; 

75 k= height / 2 — 50; 

76 stroke (0) ; 

77 strokeWeight ( 1 ) ; 

78 I i n e (0 , k , width , k) ; 

79 for (int i = 0; i < numberXDivisions; ¡+ + ){ 

so I i n e ( 0 + i * width / numberXDivisions, k, 0 + i * width / 

k + 10) ; 

81 } 

82 I i n e (width / 2, 0, width / 2, height — 100); 

83 for (int i = 0; i < numberYDivisions; ¡+ + ){ 

84 I ¡ n e ( h — 10, 0 + i * (height — 100) / numberYDivisions, h, 
— 100) / numberYDivisions); 

85 } 

86 strokeWeight (2) ; 

87 no F (); 

88 e 1 1 i p s e ( h , k, width / 2, width / 2); 

89 } 

90 


height ) ; 


float yStep){ 


numberXDivisions , 


0 + i * ( height 
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91 void segments ( boolean States []){ 

92 ¡nt r = width / 4 ; 

93 if (states[ 0 ] == t r u e ) { // seno 

94 strokeWeight ( 3 ) ; 

95 stroke (colorFunction [ 0 ]) ; 

I ¡ n e ( h + r * cos(angle), k, h + r * cos(angle), k— r 

97 strokeWeight ( 1 ) ; 

98 stroke (#B 2 B 2 B 2 ) ; 

I i n e ( h , k, h + r * cos(angle), k — r * sin (angle)) ; 

100 } 

101 if (states[ 1 ] == true){ // coseno 

102 strokeWeight ( 3 ) ; 

103 stroke ( colorFu nction [ 1 ]) ; 

104 I i n e ( h , k, h + r * cos(angle), k) ; 

ios strokeWeight ( 1 ) ; 

106 stroke (#B 2 B 2 B 2 ) ; 

107 I i n e ( h + r * cos(angle), k, h + r * cos(angle), k— r 

108 } 

109 if (states[ 2 ] == t r u e ) { // tangente 

no strokeWeighl ( 3 ) ; 

ni stroke (colorFunction [ 2 ]) ; 

112 I i n e ( h + r , k , h + r , k — r * tan(angle)); 

113 strokeWeight ( 1 ) ; 

114 stroke (#B 2 B 2 B 2 ) ; 

lis I i n e ( h , k, h + r, k — r * tan ( angle ) ) ; 

116 } 

117 if (states[ 3 ] == true){ // cotangente 

lis strokeWeight ( 3 ) ; 

119 stroke (colorFunction [ 3 ]) ; 

120 I i n e ( h , k — r, h + r * cot(angle), k — r); 

121 strokeWeight ( 1 ) ; 

122 stroke (#B 2 B 2 B 2 ) ; 

123 I i n e ( h , k, h + r * cot(angle), k— r); 

124 } 

125 if (states[ 4 ] == true){ // secante 

126 strokeWeight ( 3 ) ; 

127 stroke (colorFunction [ 4 ]) ; 

128 I i n e ( h , k, h + r, k — r * tan ( angle ) ) ; 

129 strokeWeight ( 1 ) ; 

1 3 0 stroke (#B 2 B 2 B 2 ) ; 

131 I i n e ( h + r , k , h + r , k - r * tan(angle)); 

132 } 

133 if (states[ 5 ] == true){ // cosecante 

134 strokeWeight ( 3 ) ; 

135 stroke (colorFunction [ 5 ]) ; 

1 36 I i n e ( h , k, h + r * cot(angle), k— r); 

137 strokeWeight ( 1 ) ; 

138 stroke (#B 2 B 2 B 2 ) ; 

139 I i n e ( h , k — r, h + r * cot ( angle ) , k — r); 

140 } 

141 } 


* sin ( angle ) ) ; 


* sin ( angle ) ) ; 
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142 


143 float cot(float angle){ 

144 float cotangente = 1 / tan(angle); 

145 retu rn ( cotangente ) ; 

146 } 

147 

148 void monitorlng () { 

149 fo r ( ¡ n t ¡ = 0 ; ¡ < 6 ; ¡ + + ) { 

150 print ( buttonState [ ¡ ]) ; 

151 p ri n t ( ’ \ t ’ ) ; 

152 } 

153 p r¡ n 1 1 n ( angle ) ; 

154 } 


La clase boton() del Listlng 2, recibe como parámetros de entrada las coordenadas de 
ubicación del botón y las dós Imágenes que definen los estados (ON, OFF) del botón, el método 
dibuja( ) tiene como parámetro de entrada un valor boolean que determina el estado del 
botón en el dip switch. 

1 class boton{ 

2 Plmage button , buttOn , buttOff; 

3 float x , y ; 

4 

s boton(float X, float Y, Plmage on , Plmage o f f ) { 
e x = X; 

7 y = Y; 

8 buttOn = on ; 

9 buttOff = off; 

10 } 

11 

12 vold dibuja (boolean State ) { 

13 if ( State ) { 

14 button = buttOn; 

15 } 

ie else{ 

17 button = buttOff; 

18 } 

19 ¡mage ( button , x , y ) ; 

20 } 

21 } 

La Figura 1 presenta el montaje y una demostración del resultado. 
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(a) montaje (b) resultado 

Figura 1: Montaje y Resultado del sketch Líneas Trigonométricas 

Lie. Fausto Mauricio Lagos Suárez 

Mg. Ingeniería computacional y matemática 
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